<template>
  <div>
    <el-button size="small" type="primary" @click="createStoreHouse()">创建资源库</el-button>
    <h3>点击上传</h3>
    <el-upload
      class="upload-demo"
      :action="uploadFile()"
      :before-upload="beforeAvatarUpload"
      :on-success="handleAvatarSuccess">
      <el-button size="small" type="primary">点击上传</el-button>
    </el-upload>
    <el-table
      :data="tableData"
      border
      align="center"
      style="width: 100%;">
      <el-table-column
        label="#"
        type="index"
        width="50"
        align="center">
      </el-table-column>
      <el-table-column
        prop="lastModified"
        label="文件编号"
        width="150"
        align="center">
      </el-table-column>
      <el-table-column
        prop="name"
        label="文件路径"
        width="750"
        align="center">
      </el-table-column>
      <el-table-column
        prop="size"
        label="文件大小(b)"
        width="120"
        align="center">
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
import {baseUrl} from "../../api/baseUrl"

export default {
  name: "upload",
  data () {
    return {
      tableData: [],
      fileList: [],
      imageUrl: "",
      dialogImageUrl: "",
      dialogVisible: false
    }
  },
  created () {
    this.getFiles()
  },
  methods: {
    createStoreHouse(){
      let team = {
        "id":1,
        "storeHouseId":0,
      }
      this.$http.teacher.createStoreHouse(team).then(function (resp) {
        console.log(resp)
      })
    },
    getFiles () {
      const _this = this
      let form = {
        "id": "1",
        "path": "2/",
      }
      this.$http.oss.getFileList(form).then(function (resp) {
        _this.tableData = resp
      })
    },
    uploadFile () {
      return `${baseUrl}/oss/upload?id=1&path=2/`
    },
    handleAvatarSuccess (res, file) {
      let _this = this
      if (res.code === 2000) {
        _this.$notify({
          title: '上传成功',
          type: 'success'
        })
        this.getFiles()
      } else {
        _this.$notify({
          title: res.msg,
          type: 'error'
        })
      }
    },
    beforeAvatarUpload (file) {
      const isLt2M = file.size / 1024 / 1024 < 20
      if (!isLt2M) {
        this.$message.error('上传文件大小不能超过 20MB!')
      }
      return   isLt2M
    },
  }
}
</script>

<style lang="scss">
  .avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }
  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
  }
  .avatar {
    width: 178px;
    height: 178px;
    display: block;
  }
  h3{
    margin: 55px 0 20px;
    font-weight: 400;
    color: #1f2f3d;
    font-size: 22px;
  }
  p{
    font-size: 14px;
    color: #5e6d82;
    line-height: 1.5em;
  }
</style>
